<template>
    <div class="app-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="租赁信息" name="first">
          <el-main class="formC">
            <el-descriptions :column="2" border>
              <el-descriptions-item>
                <template slot="label">
                  合同编号
                </template>
                {{info.contractCode}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  合同类型
                </template>
                <dict-tag :options="dict.type.contract_type" :value="info.contractType"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  租赁状态
                </template>
                <dict-tag :options="dict.type.lease_status" :value="info.leaseStatus"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  租金
                </template>
                {{info.contractRent}}/年
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  押金
                </template>
                {{ info.contractCashPledge }}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  付款方式
                </template>
                <dict-tag :options="dict.type.pay_type" :value="info.contractPaymentType"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  客户编号
                </template>
                {{info.customerCode}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  承租方
                </template>
                {{info.customerName}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  联系人
                </template>
                {{info.customerLinkman}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  联系电话
                </template>
                {{info.customerPhone1}}
              </el-descriptions-item>
              <el-descriptions-item span="2">
                <template slot="label">
                  合同备注
                </template>
                {{info.contractRemark}}
              </el-descriptions-item>
              <el-descriptions-item span="2">
                <template slot="label">
                  合同附件
                </template>
                <el-link type="primary" v-if="info.contractUrl" @click="download(info.contractUrl)">{{contractUrl}}</el-link>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  租赁时间
                </template>
                {{parseTime(info.contractStartDate, '{y}-{m}-{d}')}} 至 {{parseTime(info.contractEndDate, '{y}-{m}-{d}')}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  签订时间
                </template>
                {{parseTime(info.contractSigningDate, '{y}-{m}-{d}')}}
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="2" border style="margin-top: 20px">
              <el-descriptions-item>
                <template slot="label">
                  资产编号
                </template>
                <el-link type="primary" @click="showInfo(info.leaseAssetId)">{{info.assetNumMaster}}<span v-if="info.assetNumAttached">-{{info.assetNumAttached}}</span></el-link>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  资产名称
                </template>
                {{info.assetName}}
              </el-descriptions-item>
              <el-descriptions-item span="2">
                <template slot="label">
                  资产地点
                </template>
                {{info.assetAddressDistrict}}{{info.assetAddress}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  门牌号
                </template>
                <span v-if="info.assetDoorNum">{{info.assetDoorNum}}号</span>
                <span v-if="info.assetUnitNum">{{info.assetUnitNum}}单元</span>
                <span v-if="info.assetRoomNum">{{info.assetRoomNum}}室</span>

              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  房屋类型
                </template>
                <dict-tag :options="dict.type.asset_house_type" :value="info.assetHouseType"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  资产面积
                </template>
                {{info.assetArea || 0}}㎡
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  账面原值
                </template>
                {{info.assetOriginalValue}}万元
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  建成年代
                </template>
                {{info.assetEstablishDate}}年
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  产权年限
                </template>
                <dict-tag :options="dict.type.age_limit" :value="info.assetOwnershipLength"/>
              </el-descriptions-item>
              <el-descriptions-item span="2">
                <template slot="label">
                  产权单位
                </template>
                <dict-tag :options="dict.type.property_unit" :value="info.assetPropertyUnit"/>
              </el-descriptions-item>
              <el-descriptions-item span="2">
                <template slot="label">
                  备注
                </template>
                {{info.assetRemark}}
              </el-descriptions-item>
              <el-descriptions-item span="2">
                <template slot="label">
                  图片
                </template>
                <div v-if="info.assetImg">
                  <image-preview v-for="src in info.assetImg.split(',')" :width="90" :height="90" :src="src" style="margin-right: 10px"></image-preview>
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </el-main>
        </el-tab-pane>
        <el-tab-pane label="客户信息" name="second">
          <el-main class="formC">
            <el-descriptions :column="2" border>
              <el-descriptions-item>
                <template slot="label">
                  客户编号
                </template>
                {{info.customerCode}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  客户名称
                </template>
                {{info.customerName}}
              </el-descriptions-item>
              <el-descriptions-item >
                <template slot="label">
                  联系人
                </template>
                {{info.customerLinkman}}
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  联系电话
                </template>
                {{info.customerPhone1}}
              </el-descriptions-item>
              <el-descriptions-item >
                <template slot="label">
                  客户状态
                </template>
                <dict-tag :options="dict.type.customer_lease_status" :value="info.customerLeaseStatus"/>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  租赁次数
                </template>
                {{info.customerLeaseCount}}
              </el-descriptions-item>

            </el-descriptions>
          </el-main>
        </el-tab-pane>
      </el-tabs>

    </div>
</template>

<script>
  import { getLeaseInfo } from "@/api/business/leaseInfo";
  export default {
    name: "info",
    dicts: ['contract_type', 'pay_type','lease_status', 'asset_house_type', 'property_unit', 'customer_lease_status', 'age_limit'],
    data() {
        return {
          info: {},
          id: null,
          assetList: [],
          activeName: 'first',
          contractUrl: '',
        }
    },
    created() {
      this.id = this.$route.params && this.$route.params.id;
      if(this.id) this.getLeaseInfo(this.id)

    },
    methods: {
      getLeaseInfo(id) {
        getLeaseInfo(id).then(r => {
          this.info = r.data
          if(this.info.contractUrl) {
            let contract = this.info.contractUrl.split('/')
            this.contractUrl = contract[contract.length - 1]
          }
        })
      },
      download(url) {
        this.$download.resource(url)
      },
      /** 复跳转详情 */
      showInfo(assetId) {
        this.$router.push('/AssetLedger/asset-info/' + assetId)
      },
    }
  }
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 84px);
}
.formC {
  width: 100%;
  padding: 0 50px;
  height: calc(100vh - 170px);
  overflow-y: auto;
  .consignee {
    position: absolute;
    right: 10px;
    bottom: 10px;
  }
}
</style>
